<template>
  <el-dialog title="添加"  :close-on-click-modal="false" :visible.sync="show" class="dialog_index dialog_banner"
   :before-close="cancle">
    <el-form ref="bannerForm" v-loading="loading" class="product_spec_form">
      <el-tabs type="card" v-model="activeName">
          <el-tab-pane :label="item.site" :name="item.site"  v-for="item  in formList" :key="item.id">
             <el-form-item label="规格名称：">
              <el-input  :placeholder="'规格名称('+item.site+')（必填项)'" v-model="item.specification_name"></el-input>
            </el-form-item>
          </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="search" @click="submitForm">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { extendObj } from '@/utils/index'
import { add } from '@/api/product/productSpecification.js'
import { siteListGet } from '@/api/manage/site.js'
export default {
  props: {
    show: Boolean,
    closeAddDialog:Function
  },
  data() {
    return {
      formList: [],
      loading: false,
      activeName: 'us'
    }
  },
  watch: {
    show:function(){
      if(this.show){
        this.loading = true
        this.getSite()
      }
    }
  },
  methods:{
    changeColorPicker (value) {
      this.setColor(value)
    },
    setColor (value) {
      let list = this.formList
      for(let i = 0; i < list.length; i++){
        list[i].color = value
      }
      this.formList = list
    },
    getSite () {
      siteListGet().then(res => {
        if (res.status == 200) {
          let data = res.data
          for(let i = 0; i < data.length; i++  ) {
            let obj = {
              specification_name: ''
            }
            extendObj(data[i], obj)
            data[i].site_id = data[i].id
            delete data[i].id
            if (i == 0 ){
              this.activeName = data[i].site
            }
          }
          this.formList= data
          this.loading = false
        }
      })
    },
    submitForm(){
      let status = this.validateForm()
      if(status){
        this.add()
      }
    },
    validateForm () {
      let list = this.formList
      let status = true
      for ( let i = 0; i < list.length; i++ ){
        if (list[i].specification_name === '') {
          this.$message.error('站点' + list[i].site + '规格名称为必填项')
          status = false
          break
        }
        if (list[i].specification_name.length > 50) {
          this.$message.error('站点' + list[i].site + '规格名称最多50字符')
          status = false
          break
        }
        
      }
      return status
    },
    add(){
      let params = {
        data: JSON.stringify(this.formList)
      }
      add(params).then(res=>{
       console.log(res)
       if(res.state == 1) {
         this.$message.success('添加规格成功')
         this.cancle()
       }
      })
    },
    cancle(){
      this.$emit('closeDialog')
    },
  }
}
</script>

<style lang="scss">

</style>